<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>巡检系统</el-breadcrumb-item>
            <el-breadcrumb-item>巡检审核</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="patrolTask" class="demo-form-inline">
        <el-row>
            <el-col :span="5">
                <el-form-item label="任务编号">
                    <el-input v-model="patrolTask.taskNo" placeholder="请输入编号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="任务名称">
                    <el-input v-model="patrolTask.taskName" placeholder="请输入计划名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="任务类型" label-width="80px">
                    <el-select v-model="patrolTask.taskType" placeholder="请选择">
                        <el-option label="计划任务" value="plan">计划任务</el-option>
                        <el-option label="临时任务" value="temp">临时任务</el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
                <el-form-item label="开始日期">
                    <el-date-picker
                        v-model="patrolTask.startDate"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="结束日期">
                    <el-date-picker
                        v-model="patrolTask.endDate"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                 <el-form-item>
                    <el-button type="info" @click="onSubmit">查询</el-button>
                    <el-button @click="clear">清空</el-button>
                </el-form-item>
            </el-col>
        </el-row>
      </el-form>

      <!-- 任务列表 -->
      <div class="bbb">
        <el-table class="tab1" :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" :index="index" label="序号" width=""></el-table-column>
            <el-table-column prop="taskNo" label="任务编号" width=""></el-table-column>
            <el-table-column prop="taskName" label="任务名称" width=""></el-table-column> 
            <el-table-column prop="taskType" label="任务类型" width="">
                <template slot-scope="scope">
                    <span>{{scope.row.taskType=='plan'?'计划任务':'紧急任务'}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="endDate" label="结束时间" width=""></el-table-column> 
            <el-table-column prop="executor" label="执行人" width=""></el-table-column>
            <el-table-column label="操作" width="350">
                <template slot-scope="scope">
                    <el-button @click="see(scope.row)" size="mini" round>查看详情</el-button>
                    <el-button type="primary" @click="check(scope.row)" size="mini" round>审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <el-pagination class="pag"
            layout="prev, pager, next"
            :total="totle"
            :page-size='pageSize'
            @current-change='change'>
        </el-pagination>



        <!-- 完成任务弹框 -->
        <el-dialog title="完成巡检任务" width="30%" :visible.sync="successTaskVisible">
            <el-form :model="successData">

             <el-row>
                <el-col>
                <el-form-item label="提交人:" label-width="80px">
                    <span class="span1">{{successData.executor}}</span>
                </el-form-item>
            </el-col>
             </el-row>

             <el-row>
                <el-col>
                <el-form-item label="提交时间:" label-width="80px">
                    <span class="span1">{{successData.fulfilDate}}</span>
                </el-form-item>
            </el-col>
             </el-row>
            
            
   
            <el-row>
                <el-col>
                    <el-form-item label="检测结果:" label-width="80px">
                        <span class="span1">{{successData.patResult}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            


             

            <el-row>
                <el-col>
                    <el-form-item label="备注:" label-width="80px">
                        <span class="span1">{{successData.patExplain}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="successTaskVisible=false">确 定</el-button>
            </div>
        </el-dialog>



        <!-- 审核弹框 -->
        <el-dialog title="审核任务" width="30%" :visible.sync="checkTaskVisible">
            <el-form :model="checkDate">
            <el-row>
                <el-col>
                <el-form-item label="审核结果" label-width="80px">
                     <el-radio v-model="checkDate.ckResult" label="审核通过">审核通过</el-radio>
                    <el-radio v-model="checkDate.ckResult" label="审核不通过">审核不通过</el-radio>
                </el-form-item>
            </el-col>
             </el-row>

             <el-row>
                <el-col>
                <el-form-item label="审核建议" label-width="80px">
                    <el-input type="textarea" v-model="checkDate.ckAdvice"></el-input>
                </el-form-item>
            </el-col>
             </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="checkTaskVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkTaskSuccess">提 交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            patrolTask:{
                taskNo:'',
                taskName:'',
                taskType:'',
                taskStatu:'',
                startDate:'',
                endDate:'',
            },
            tableData:[],
            totle:50,
            pageSize:5,
            pageIndex:1,

            // 提交的数据
            successData:{
                executor:'',
                fulfilDate:'',
                patResult:'',
                patExplain:'',
            },
            
            successTaskVisible:false,
            // 
            checkTaskVisible:false,
            
            // 审核数据
            checkDate:{
                taskId:'',
                ckResult:'审核通过',
                ckAdvice:'',
            },


        }
    },

    methods:{
        index(dex){
              return (this.pageIndex-1)*this.pageSize+dex+1;
        },
        onSubmit(){
            this.pageIndex=1;
            this.getTaskList();
        },
        clear(){
            this.patrolTask.taskNo='';
            this.patrolTask.taskName='';
            this.patrolTask.taskType='';
            this.patrolTask.taskStatu='';
            this.patrolTask.startDate='';
            this.patrolTask.endDate='';
        },
        getTaskList(){
            this.axios.post("task/taskList?pageSize="+this.pageSize+"&pageIndex="+this.pageIndex,this.patrolTask).then(res=>{
                console.log(res.data.data);
                this.totle=res.data.data.total;
                this.tableData=res.data.data.list;
            })
        },
        change(a){
            console.log(a);
            this.pageIndex=a;
            this.getTaskList();
        },
        // 查看详情
        see(row){
            this.axios.get("situation/situationTaskId?id="+row.id).then(res=>{
                console.log(res.data.data);
                if(res.data.data==null){
                    this.$message("无信息");
                }else{
                    this.successData.executor=res.data.data.executor;
                    this.successData.fulfilDate=res.data.data.fulfilDate;
                    this.successData.patResult=res.data.data.patResult;
                    this.successData.patExplain=res.data.data.patExplain;
                    this.successTaskVisible=true;
                }
            })
            
        },
        check(row){
            this.checkDate.taskId=row.id;
            this.checkDate.ckResult='审核通过',
            this.checkDate.ckAdvice='',
            this.checkTaskVisible=true;
        },
        checkTaskSuccess(){
            this.axios.post("check/checkTask",this.checkDate).then(res=>{
                this.$message(res.data.msg);
                this.getTaskList();
                this.checkTaskVisible=false;
            })
        }
    },

    created(){
        
        this.getTaskList();
    }
}
</script>

<style scoped>
    .el-breadcrumb{
      height: 60px;
      line-height: 60px;
      font-size: 17px;
      margin-left: 30px;
  }
  .span1{
      font-weight: 700px;
      font-size: 18px;
      margin-left: 20px;
  }
  .pag{
      text-align: center;
  }
  .bbb{
      height: 400px;
      width: 1450px;
  }
</style>